<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
margin:  100 auto; 
text-align: center;
width: 700px;
border-collapse: collapse;
      }
      thead{
        background-color: aqua;

      }
      tbody tr{
        border-bottom: 1px solid #f2d7d7;
      }
     .a{
        background-color: darkgray;
     }
     
     
    </style>
</head>
<body>
   <table>
    <thead>
    <tr>
        <th>编号 </th>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
    </tr>
</thead>
<tbody>
    <tr class="a">
        <td>01</td>
        <td>牛仔外套</td>
        <td>99元</td>
        <td>1</td>
        <td>99元</td>
    </tr>
    <tr class="a">
        <td>02</td>
        <td>帽子</td>
        <td>25元</td>
        <td>2</td>
        <td>50元</td>
    </tr>
    <tr class="a">
        <td>03</td>
        <td>双肩包</td>
        <td>100元</td>
        <td>1</td>
        <td>100元</td>
    </tr>
</tbody>
   </table> 
</body>
<script>
let tr=document.querySelector('tbody').querySelectorAll("tr");
for(let i=0;i<tr.length;i++){
    tr[i].onmouseover=function(){
        this.className ='a';
    };
    tr[i].onmouseout=function(){
        this.className='';
    };
}


</script>
</html>